<?php if (!defined('THINK_PATH')) exit();?><!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="UTF-8">
	<title>CRM客户关系管理</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
 	<!-- <link rel="stylesheet" href="/gaoa/Public/css/global.css" media="all"> -->
	<!--<link rel="stylesheet" href="/gaoa/Public/plugins/font-awesome/css/font-awesome.min.css"> -->

	<link rel="stylesheet" href="/gaoa/Public/css/element-ui--index.css">


	<style>
	    *{
	    	font-family: microsoft YaHei;
	    }
		.pull-left {
			float: left;
		}
		.pull-right {
			float: right;
		}
		.container {
			padding: 2px;
		}
		.container > .wrapp >  .el-row {
			margin-bottom: 10px;
		}
		.el-form--inline .el-form-item {
			margin-bottom: 0px;
		}
/*		#app>.wrapp{
			display: none;
		}*/
		
		/*表格条纹样式*/
		.el-table .info-row {
		background: #ffffff;
		}

		.el-table .positive-row {
		background: #c9e5f5;
		}
		.cell img{
			vertical-align: middle;
		}
		
		.el-date-editor.el-input{
			width: 100%;
			max-width: 370px;
		}

		.el-table__body tr.current-row>td{
	      background: rgba(157, 195, 232, 0.7) !important;
	  }

    @media screen and (min-width:1165px) and (max-width:1200px){
      .el-dialog--small {
          width: 70%;
      }
    }

    @media only screen and (max-width:1164px){
      .el-dialog--small {
          width: 85%;
      }
    }  		
	</style>
	<!-- 如果没有 则 提供一些高级的js功能  -->
	<script src="/gaoa/Public/js/advancejs.js"></script>
	<!-- 不支持IE9 及以下的浏览器 -->
	<!--[if lte IE 9]> 
	<script>
		window.location.href="<?php echo U('login/notsupport');?>";
	</script>
	<![endif]-->
	
  <style>
    .el-tabs__header{
      border-top:2px solid #ea4b4b;
      border-bottom: 1px solid #c51f1f;
    }
    .el-dialog .el-tabs__header{
      border-top:none;
    }
    .el-tabs--border-card .el-tabs__item{
      border-left: none;
    }
    .el-tabs--border-card .el-tabs__item.is-active {
      background-color: #fff;
      border-right-color: #d3dce6;
      background: #544b8f;
      color: #fff;
    }
    .el-tabs--border-card .el-tabs__header {
      background-color: #fff;
      margin: 0;
    }
    .container > .wrapp > .a > .el-row {
      margin-bottom: 6px;
    }
    .el-tabs--border-card .el-tabs__content{
      padding:0 9px 5px 9px;
    }
    .el-card, .el-menu--horizontal .el-submenu>.el-menu, .el-tabs--border-card{
      box-shadow: none;
    }
    .el-tabs--border-card{
      border: none;
    }
    .el-tabs__item{
      font-family: Microsoft YaHei;
      color:#0d0f10;
      font-size: 14px;
    }
    .el-dialog__body{
      color: rgb(72, 87, 106);
      font-size: 14px;
      /*padding: 30px 20px;*/
      padding: 30px 20px 6px 20px;
    }
  </style>

</head>
<body>
	
	
  <div id="app" class="container">
    <div class="wrapp" v-show="show" style="display:none;">
      <div class="a">
        <el-row>
          <el-col :span="24">
            <el-form :inline="true" ref="searchForm" :model="searchForm">
            	<el-form-item v-show="departName=='总部'">
	              <el-select size="small" style="width:150px;" v-model="searchForm.belongs_department" clearable filterable allow-create placeholder="所属部门">
                  <el-option v-for="department in belongsDepartment" :label="department.name" :value="department.name"></el-option>
	              </el-select>
			  		  </el-form-item>

              <el-form-item prop="name" style="width:150px">
                <el-input v-model="searchForm.name" size="small" placeholder="用品名称"></el-input>
              </el-form-item>

              <el-form-item prop="order_time">
                <el-date-picker size="small" v-model="searchForm.order_time" 
                  placeholder="选择入库日期范围" 
                  type="daterange"
                  @change="DateChange" style="width:210px;">
                </el-date-picker>
              </el-form-item>
              

              <el-form-item>
                <el-tooltip content="填写或者选择好筛选条件后点击此按钮" placement="bottom-start">
                  <el-button type="info" size="small" icon="search" @click="loadDatalist">查询</el-button>
                </el-tooltip> 
              </el-form-item>
             
              <el-form-item>
                <el-tooltip content="清空搜索框并刷新表格数据" placement="bottom-start">
                  <el-button size="small" @click="resetBack">重置</el-button>
                </el-tooltip>
              </el-form-item>

              <el-form-item>
                <el-tooltip content="点击刷新当前页面" placement="right">
                  <el-button @click="refresh" size="small" type="danger">刷新</el-button>
                </el-tooltip>
              </el-form-item>

            </el-form>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <el-table v-loading="dataLoad" :data="dataList"
                @selection-change="handleChange"
                @row-dblclick = "showInfo"
                element-loading-text="<?php echo L('DATA_LOGIN');?>"
                empty-text="暂无数据！"
                highlight-current-row ref="select" border>
              <el-table-column type="selection" width="55"></el-table-column>
							<el-table-column label="<?php echo L('INDEX');?>" type="index" width="65" :formatter="handleIndex">
			  	    </el-table-column>
			  	    <el-table-column  align="center" prop="belongs_department" label="部门">
	            </el-table-column>

              <el-table-column  align="center" prop="name" label="名称" show-overflow-tooltip>
              </el-table-column>

              <el-table-column  align="center" prop="specification" label="规格" show-overflow-tooltip>
              </el-table-column> 

              
              <el-table-column  align="center" prop="unit" label="单位">
              </el-table-column>
              
              <el-table-column  align="center" prop="price" label="单价">
              </el-table-column>
              
              <el-table-column  align="center" prop="num" label="数量">
              </el-table-column>

              <el-table-column  align="center" prop="order_time" label="入库时间" width="180px">
              </el-table-column>

              <el-table-column align="center" prop="remark" label="备注" show-overflow-tooltip>
              	<template scope="scope">
                	{{ scope.row.remark | handleString(4) }}
              	</template>
              </el-table-column>
            </el-table>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <div class="grid-content bg-purple">
              <span class="wrapper">
                <el-tooltip content="请选择一条信息再点击删除" placement="bottom-start">
                  <el-button size="small" @click="handleDeletes" type="danger">删除</el-button>
                </el-tooltip>
                <el-tooltip content="点击新增一个入库申请" placement="right">
                  <el-button size="small" @click="openDialog('add')" type="primary">新增入库</el-button>
                </el-tooltip>
              </span>
            </div>
          </el-col>
          <el-col :span="12" >
            <div class="grid-content bg-purple-light pull-right">
              <!-- page -->
              <el-pagination
  @current-change="handleCurrentPageChange"
  :current-page="currentPage"
  layout="total, prev, pager, next, jumper"
  :total="total"
  :page-size="pageSize"
  ref="pagination"
  >
</el-pagination>
              <!-- / page -->
            </div>
          </el-col>
        </el-row>
      </div>
      <div class="dialogWrapper" v-show="show" style="display: none">
        <!-- 新增 -->
        <el-dialog title="新增入库" v-model="addFormDialog">
  <el-form  ref="addForm" :label-width="dialogLabelWidth" :model="addForm" :rules="addRules">
    <el-row>
      <el-col :span="11">
        <el-form-item label="名称" prop="name">
          <el-select v-model="addForm.name" placeholder="请选择用品名称" @change="nameChange">
            <el-option v-for="(value,key) in names" :label="value" :value="value"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="11">
        <el-form-item label="规格" prop="specification">
          <el-select v-model="addForm.specification" placeholder="请选择物品规格" @change="specChange">
            <el-option v-for="(value,key) in specifications" :label="value" :value="value"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
    	<el-col :span="11">
        <el-form-item label="单位" prop="unit">
          <el-select v-model="addForm.unit" placeholder="请选择物品单位">
            <el-option v-for="(value,key) in units" :label="value" :value="value"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="11">
        <el-form-item label="单价" prop="price">
          <el-input v-model.number="addForm.price" placeholder="请填写物品单价" :maxlength="8"></el-input>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="11">
        <el-form-item label="数量" prop="num">
          <el-input-number v-model="addForm.num" :min="1" :max="999"></el-input-number>
        </el-form-item>
      </el-col>
      <el-col :span="11">
        <el-form-item label="采购入库时间" prop="order_time">
          <el-date-picker v-model="addForm.order_time" type="datetime" placeholder="选择采购入库时间" 
           style="max-width:200px;" :editable="false" @change="orderTime" :picker-options="pickerOption1">
          </el-date-picker>
        </el-form-item>
      </el-col>
    </el-row>
 
    <el-row>
      <el-col :span="22">
        <el-form-item label="备注" prop="remark">
          <el-input type="textarea" :rows="4" v-model="addForm.remark" placeholder="请填写活动备注"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>

  <div slot="footer" class="dialog-footer">
    <el-button @click="closeDialog('add')">取 消</el-button>
 <el-button type="primary" v-show="!addFormSubmitStatus" @click="addFormSubmit(page.addFormUrl, 'add')" >确 定</el-button>
 <el-button type="primary" v-show="addFormSubmitStatus" :loading="true" >添加中</el-button>
  </div>

</el-dialog>

        <!-- / 新增 -->
        <!-- 展示行信息 -->
        <el-dialog title="资料详情" :visible.sync="infoDialog">
  
  <el-row style="font-size:16px;padding:0 0 10px 30px;">
    <el-col :span="11">
      <a style="font-weight:bold;">名称：</a>{{infoData.name}}
    </el-col>
    <el-col :span="11">
      <a style="font-weight:bold;">分类：</a>{{infoData.type}}
    </el-col>
  </el-row>
  
  <el-row style="font-size:16px;padding:0 0 10px 30px;">
    <el-col :span="11">
      <a style="font-weight:bold;">规格：</a>{{infoData.specification}}
    </el-col>
    <el-col :span="11">
      <a style="font-weight:bold;">单位：</a>{{infoData.unit}}
    </el-col>
  </el-row>

  <el-row style="font-size:16px;padding:0 0 10px 30px;">
    <el-col :span="11">
      <a style="font-weight:bold;">单价：</a>{{infoData.price}}
    </el-col>
    <el-col :span="11">
      <a style="font-weight:bold;">数量：</a>{{infoData.num}}
    </el-col>
  </el-row>
  
  <el-row style="font-size:16px;padding:0 0 10px 30px;">
  	<el-col :span="11">
      <a style="font-weight:bold;">总额：</a>{{infoData.sum}}
    </el-col>
    <el-col :span="11">
      <a style="font-weight:bold;">采购时间：</a>{{infoData.order_time}}
    </el-col>
  </el-row>

  <el-row style="font-size:16px;padding:0 0 10px 30px;">
  	<!--<el-col :span="11">
      <a style="font-weight:bold;">采购单号：</a>{{infoData.order_num}}
    </el-col>-->
    <el-col :span="11">
      <a style="font-weight:bold;">所属部门：</a>{{infoData.belongs_department}}
    </el-col>
  </el-row>
  <el-row style="font-size:16px;padding:0 0 10px 30px;">
    <el-col :span="11">
      <a style="font-weight:bold;">备注：</a>{{infoData.remark}}
    </el-col>
  </el-row>

  <div slot="footer" class="dialog-footer">
   <el-button type="primary" @click="infoDialog = false">知道了</el-button>
  </div>

</el-dialog>

        <!-- / 展示行信息 -->
      </div>
    </div>
  </div>

	<script src="/gaoa/Public/js/vue.min.js"></script>
  <script src="/gaoa/Public/js/element-ui--index.js"></script>
	<script src="/gaoa/Public/js/vue-resource.min.js"></script>

	<!-- vue 通用部分  -->
	<script src="/gaoa/Public/js/vueHooks.js"></script>
	<script src="/gaoa/Public/js/vueMethods.js"></script>
	<script src="/gaoa/Public/js/vueOption.js"></script>
	<script src="/gaoa/Public/js/vueCommonLogic.js?b=d"></script>
	<script>
		var page = {
			addFormUrl:"<?php echo U('add');?>",
			editFormUrl:"<?php echo U('edit');?>",
			listUrl:"<?php echo U('getList');?>",
			deleteUrl:"<?php echo U('delete');?>",
			pageSize:<?php echo ($pageSize); ?>
		}
		window.defaultOption = new VueOption();

		// setCommonLogin 还可以再细分
		setCommonLogic(window.defaultOption);


	</script>

	<!-- / vue 通用部分  -->


	<script>
		
		
	</script>


	
<script>
	var gname = '';
	window.defaultOption.setDatas({
		multipleSelection: [],
		dialogLabelWidth:"120px",
		infoDialog:false,
    infoData:{},
    dataList:[],
    type:<?php echo json_encode($type);?>,
    belongsDepartment:<?php echo json_encode($belongsDepartment);?>,
    departName:<?php echo json_encode($departName);?>,
    names:[],
    units:[],
    specifications:[],
    pickerOption1:{
	      disabledDate: function(time){
	          return time.getTime() > Date.now();
	      }
	  },
    addRules:{
			name:[
      {required: true, message: '请选择用品名称'},
			],
			specification:[
      {required: true, message: '请选择物品规格'},
			],
			unit:[
      {required: true, message: '请选择物品单位'},
			],
			price:[
      {required: true, message: '请填写物品单价', trigger: 'blur', type:"number"},
      { pattern:/^(([1-9][0-9]*)|(([0]\.\d{1,2}|[1-9][0-9]*\.\d{1,2})))$/,  message: '格式为888或888.00'},
			],
			num:[
      {required: true, message: '请输入数字值', trigger: 'blur', type: 'number'},
			],
			order_time:[
      {required: true, message: '选择采购入库时间',trigger: 'change'},
			]
		},
	}).setForm('add',{
    name:"",
    specification:"",
    unit:"",
    order_num:"",
    num:"",
    order_time:"",
    remark:"",
    info_status:"1",
  },true).setForm('search',{
  	belongs_department:<?php echo json_encode($departName);?>,
    name:'',
    order_time:"",
	}).setVueHook('mounted', function(){
	    var vmThis = this;
	    var names = [];
	    this.$http.get('<?php echo U("OfficeStationery/getData");?>').then(function(response){
	      names = response.body;
	      vmThis.$set(vmThis, 'names', names);
	      console.log(names);
	    });
	  }).setMethod('nameChange', function(name){
	    var vmThis = this;
	    var specifications = [];
	    gname  = name;
	    this.$http.get('<?php echo U("OfficeStationery/getSpecByName");?>', {params:{name:name} }).then(function(response){
	      specifications = response.body;
	      vmThis.$set(vmThis, 'specifications', specifications);
	      vmThis.$set(vmThis['addForm'], 'specification', specifications[0]);
	      console.log(specifications);
	    });
	  }).setMethod('specChange', function(specification){
	    var vmThis = this;
	    var units = [];
	    this.$http.get('<?php echo U("OfficeStationery/getUnitsBySpec");?>', {params:{specification:specification, name:gname} }).then(function(response){
	      units = response.body;
	      vmThis.$set(vmThis, 'units', units);
	      vmThis.$set(vmThis['addForm'], 'unit', units[0]);
	      console.log(units);
	    });
	  }).setMethod('resetBack',function(){
    window.location.href="<?php echo U('index');?>";
  }).setMethod('getType', function(type, field){
 		return this[field][type];
  }).setMethod('DateChange', function(v){
    this.searchForm.start1 = v.slice(0,10);
    this.searchForm.start2 = v.slice(13);
  }).setMethod('orderTime', function(v){
    this.addForm.order_time = v;
    console.log(v);
  }).setMethod('handleChange', function(val){
	  this.multipleSelection = val; //点击勾选用这个
		//点击选中用这个 开始
		/*this.deleteArrAllItem('multipleSelection');
		this.multipleSelection.push(val) ;*/
		//点击选中用这个 结束
	    
	}).setMethod("handleDeletes", function(url){
	  if(this.multipleSelection.length <= 0 || this.multipleSelection.length>1){
		  this.$message.error('请选择一条信息');
		  return false;
	  }else{
		  if (!arguments[2]) {
			  url= this.page.deleteUrl;
		  }
		  var selectedIds = new Array();
		  for(var i=0; i<this.multipleSelection.length; i++){
			  selectedIds[i] = this.multipleSelection[i].id;
		  }
		  var vmThis = this;
		  this.$confirm('确定删除?', '提示', {
			  confirmButtonText: '确定',
			  cancelButtonText: '取消',
			  type: 'warning'
		  }).then(function(){
			  vmThis.$http.post(url, {ids:selectedIds}).then(function(response){
				  vmThis.$message({
					  type: 'success',
					  message: '删除成功!'
				  });
				  vmThis.loadDatalist();
			  }, function(response){
				  vmThis.$message({
					  type: 'error',
					  message: '删除失败'
				  });
			  })
		  }).catch(function() {
			  vmThis.$message({
				  type: 'info',
				  message: '已取消操作'
			  });
		  });
	  }

  }).setMethod('showInfo',function(row, event){
    this.infoData = row;
    this.infoDialog = true;
  });
</script>

	<script>
	//改modal

		window.defaultVm = new Vue(window.defaultOption.getOption()).$mount('#app');
	</script>
</body>
</html>